---
import type { Props } from '@astrojs/starlight/props';

import TableOfContents from 'virtual:starlight/components/TableOfContents';
import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
import StarlightBanner from '~/components/StarlightBanner.astro';
---

{
	Astro.props.toc && (
		<>
			<div class="lg:sl-hidden">
				<MobileTableOfContents {...Astro.props} />
			</div>
			<div class="right-sidebar-panel sl-hidden lg:sl-block">
				<div class="sl-container">
					<TableOfContents {...Astro.props} />
				</div>
				<div class="sl-container">
					<StarlightBanner />
				</div>
			</div>
		</>
	)
}

<style>
	.right-sidebar-panel {
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding: 1rem var(--sl-sidebar-pad-x);
	}
	.sl-container {
		width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
	}
	.right-sidebar-panel :global(:where(h2)) {
		color: var(--sl-color-white);
		font-size: var(--sl-text-h5);
		font-weight: 600;
		line-height: var(--sl-line-height-headings);
		margin-bottom: 0.5rem;
	}
	.right-sidebar-panel :global(:where(a)) {
		display: block;
		font-size: var(--sl-text-xs);
		text-decoration: none;
		color: var(--sl-color-gray-3);
		overflow-wrap: anywhere;
	}
	.right-sidebar-panel :global(:where(a):hover) {
		color: var(--sl-color-white);
	}
	@media (min-width: 72rem) {
		.right-sidebar-panel {
			display: flex;
		}

		.sl-container {
			max-width: calc(
				(
					(
							100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
								var(--sl-sidebar-pad-x)
						) * 0.25 /* MAGIC NUMBER 🥲 */
				)
			);
		}
	}
</style>
